@include b(control-searchbar-quick-group) {
  overflow: hidden;
  @include when(card) {
    .#{bem(control-searchbar-quick-group-item)} {
      width: max-content;
      padding: 0 4px;
      @include when(selected){
        &::after{
          bottom: -16px;
          left: 0;
          width: 100%;
        }
      }
    }
    .#{bem(control-searchbar, counter)} {
      margin: 0;
    }
    .#{bem(badge)} {
      --ibiz-badge-bg-color: transparent;

      display: inline;
      height: auto;
      padding: 0;
      font-size: getCssVar(font-size, header, 2);
      color: inherit;
    }

    .el-card {
      display: flex;
      align-items: end;
      min-width: 140px;
      min-height: 100px;
      cursor: pointer;
      border: none;
      border-radius: 0;
      box-shadow: none;

      &:hover{
        color: getCssVar(color, primary);
      }

      &.is-selected {
        color: getCssVar(color, primary);
      }
    }

    .el-card__body {
      display: flex;
      flex-direction: column;
    }

    .el-tabs__item {
      height: auto;
      padding: getCssVar(spacing, tight) 0;
    }

    .el-tabs__item +.el-tabs__item {
      border-left: 1px solid getCssVar(color, border);
    }

    .el-tabs__header {
      margin: 0;
    }

    .el-tabs__active-bar {
      display: none;
    }

    .el-tabs__nav {
      padding: 0 getCssVar(spacing, tight);;
    }

    .el-tabs__nav-wrap {
      display: flex;
      align-items: center;
      padding-top: getCssVar(spacing, tight);
      padding-bottom: getCssVar(spacing, tight);

      &::after {
        display: none;
      }

      &.is-scrollable {
        padding: 0 28px;
      }
    }

    .el-tabs__nav-prev,.el-tabs__nav-next {
      width: 28px;
      font-size: getCssVar(font-size, header, 2);
    }
  }
}